import {defaultCommonStyle} from "@/views/dataScreen/Container/SideBox/const";
import {useCanvasByContext} from "@/utils/canvasHook";
import {isTextComponent} from "@/views/dataScreen/Container/SideBox";
import '../index.less'
const defaultStyle = {
    ...defaultCommonStyle,
    width: 170,
    height: 30,
    lineHeight: "30px",
    fontSize: 12,
    fontWeight: "normal",
    color: "#000",
    backgroundColor: "#ffffff00",
    textAlign: "left",
};
const settings = [
    {
        value: "双击编辑标题",
        style: {
            ...defaultStyle,
            fontSize: 28,
            height: 50,
            lineHeight: "50px",
        },
    },
    {
        value: "双击编辑正文",
        style: defaultStyle,
    },
];
const TextSide = () => {
    const canvas:any = useCanvasByContext();
    const addCmp = (_cmp:any) => {
        canvas.addCmp(_cmp);
    };
    const onDragStart = (e:any, _cmp:any) => {
        e.dataTransfer.setData("drag-cmp", JSON.stringify(_cmp));
    };
    return (
        <div className={'side-chld-box-main'}>
            <ul className={'box'}>
                {settings.map((item) => (
                    <li
                        key={item.value}
                        className={'item'}
                        onClick={() =>
                            addCmp({
                                ...item,
                                value: item.value,
                                type: isTextComponent,
                            })
                        }
                        draggable="true"
                        onDragStart={(e) =>
                            onDragStart(e, {...item, type: isTextComponent})
                        }>
                        {item.value.indexOf("双击编辑") > -1
                            ? item.value.slice(4)
                            : item.value}
                    </li>
                ))}
            </ul>
        </div>
    )
}
export default TextSide
